<template>
    <view>
        <view class="user-info-page">
            <!-- 头像 -->
            <view class="info-item" @tap="changeAvatar">
                <text class="info-label">头像</text>
                <view class="avatar-container">
                    <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
                    <image src="/static/icon/arrow.png" style="width: 26rpx; height: 26rpx;" class="arrow"
                        mode="aspectFit">
                    </image>
                </view>
            </view>

            <!-- 姓名 -->
            <view class="info-item">
                <text class="info-label">老人姓名</text>
                <text class="info-value">{{ userInfo.name || '无' }}</text>

            </view>

            <!-- 部门 -->
            <view class="info-item">
                <text class="info-label">养老院</text>
                <text class="info-value">{{ userInfo.part || '无' }}</text>


            </view>

            <!-- 职位 -->
            <view class="info-item">
                <text class="info-label">职位</text>
                <text class="info-value">{{ userInfo.position || '无' }}</text>


            </view>

            <!-- 联系方式 -->
            <view class="info-item">
                <text class="info-label">性别</text>
                <text class="info-value">{{ userInfo.sex === 0 ? '女' : '男' || '无' }}</text>

            </view>

            <!-- 入职时间 -->
            <view class="info-item">
                <text class="info-label">年纪</text>
                <text class="info-value">{{ calculateAge(userInfo.birthday) || '无' }}</text>


            </view>

            <view class="info-item">
                <text class="info-label">身份证号</text>
                <text class="info-value">{{ userInfo.id_num || '无' }}</text>

            </view>

            <view class="info-item">
                <text class="info-label">籍贯</text>
                <text class="info-value">{{ userInfo.province || '无' }}</text>

            </view>
            <view class="info-item">
                <text class="info-label">婚姻状况</text>
                <text class="info-value">{{ getMaritalStatus(userInfo.marray) || '无' }}</text>


            </view>
        </view>
        <view class="user-info-page">
            <view class="info-item">
                <text class="info-label">既往病史</text>
                <text class="info-value">{{ userInfo.history || '无' }}</text>

            </view>
            <view class="info-item">
                <text class="info-label">过敏史</text>
                <text class="info-value">{{ userInfo.mi_history || '无' }}</text>

            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {

            }
        }
    },
    onLoad() {
        // 设置导航栏标题
        uni.setNavigationBarTitle({
            title: '用户信息'
        });
        this.userInfo = uni.getStorageSync('userInfo')


    },
    methods: {
        // 更换头像
        changeAvatar() {
            uni.showActionSheet({
                itemList: ['从相册选择', '拍照'],
                success: (res) => {
                    const sourceType = res.tapIndex === 0 ? ['album'] : ['camera'];
                    uni.chooseImage({
                        count: 1,
                        sizeType: ['compressed'],
                        sourceType: sourceType,
                        success: (res) => {
                            this.userInfo.avatar = res.tempFilePaths[0];
                            uni.showToast({
                                title: '头像更新成功',
                                icon: 'success'
                            });
                        }
                    });
                }
            });
        },
        // 计算年龄
        calculateAge(birthday) {
            if (!birthday || birthday === '0000-00-00') return '未知';
            const birth = new Date(birthday);
            const today = new Date();
            let age = today.getFullYear() - birth.getFullYear();
            const monthDiff = today.getMonth() - birth.getMonth();
            if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
                age--;
            }
            return age > 0 ? age.toString() : '未知';
        },

        // 获取婚姻状况
        getMaritalStatus(marray) {
            switch (marray) {
                case 1: return '未婚';
                case 2: return '已婚';
                case 3: return '离异';
                case 4: return '丧偶';
                default: return '未知';
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.user-info-page {
    background: #F8F8F8;
    padding: 20rpx;
}

.info-item {
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 30rpx;
    margin-bottom: 2rpx;
}

.info-item:first-child {
    border-radius: 16rpx 16rpx 0 0;
}

.info-item:last-child {
    border-radius: 0 0 16rpx 16rpx;
    margin-bottom: 0;
}

.info-item:only-child {
    border-radius: 16rpx;
}

.info-label {
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
}

.info-value {
    font-size: 30rpx;
    color: #666666;
    text-align: right;
}

.avatar-container {
    display: flex;
    align-items: center;
}

.user-avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    background-color: #F0F0F0;
}

.arrow {
    font-size: 32rpx;
    color: #999999;

    font-weight: 300;
}
</style>